<!-- 实时推送 -->

<template>
  <div />
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'Socket',

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 不通知的页面列表
     */
    NO_NOTICE: () => ['Home'],
  },

  /**
   * 监听属性 (深度 deep 首次 immediate)
   */
  watch: {
    /**
     * 监听最新推送数据
     */
    'CORE.SOCKET.data'(data) {
      this.checkMessage(data) && this.alertMessage(data) // 判断是否为通知
    },
  },

  /**
   * 创建完成 (先抽取再调用)
   */
  created() {
    CORE.SOCKET.URL && CORE.socketConnect()
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 检查消息
     */
    checkMessage() {
      if (this.NO_NOTICE.includes(this.$route.name)) return false
      return true
    },

    /**
     * 弹出消息
     */
    alertMessage(obj) {
      let notice = null

      // 点击详情
      const click = () => {
        notice.close()
        // this.openDetail(obj)
      }

      // 消息内容
      const h = this.$createElement
      const props = { size: 'mini' }
      const style = { marginLeft: '16px' }
      const message = h('div', [h('span', obj.title), h('el-button', { props, style, on: { click } }, '详情')])

      // 打开通知
      notice = this.$notify({
        title: '通知',
        message,
        duration: 0,
        dangerouslyUseHTMLString: true,
        type: 'warning',
        position: 'bottom-right',
        customClass: 'Socket-Notification',
      })
    },
  },
}
</script>
